<template>
  <div id="map">
      CenterMap
  </div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import {onMounted, reactive} from "vue";

let map;

const geojsonSource = {
  'type': 'geojson',
  'data': {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'properties': {
          'message': 'Foo',
          'iconSize': [60, 60],
          'description': '<strong>Test01</strong>'
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [-91.3952, -0.9145],
        }
      },
      {
        'type': 'Feature',
        'properties': {
          'message': 'Bar',
          'iconSize': [50, 50],
          'description': '<strong>Test02</strong>'
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [-90.3295, -0.6344]
        }
      },
      {
        'type': 'Feature',
        'properties': {
          'message': 'Baz',
          'iconSize': [40, 40],
          'description': '<strong>Test03</strong>'
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [-91.3403, 0.0164]
        }
      }
    ]
  }
}
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'

  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id
    style: 'mapbox://styles/mapbox/streets-v12', // 地图样式
    center: [-90.96, -0.47],
    zoom: 7.2,
  })
  // Add a scale control(缩放控制插件) to the map
  map.addControl(new mapboxgl.ScaleControl());
  // Mapbox汉化处理
  map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh-Hans'
  }));

  map.on('load', () => {
// Add a GeoJSON source with 3 points.
    map.addSource('points', geojsonSource);
// Add a circle layer
    map.addLayer({
      'id': 'circle',
      'type': 'circle',
      'source': 'points',
    });
    // Add markers to the map.
    for (const marker of geojsonSource.data.features) {
      console.log('output-> create marker', )
// Create a DOM element for each marker.
      const el = document.createElement('div');
      const width = marker.properties.iconSize[0];
      const height = marker.properties.iconSize[1];
      el.className = 'marker';
      el.style.backgroundImage = `url(/images/lvhuo.jpg)`;
      el.style.width = `${width}px`;
      el.style.height = `${height}px`;
      el.style.backgroundSize = '100%';
      el.style.borderRadius = '100%'
      el.addEventListener('click', () => {
        window.alert(marker.properties.message);
      });

// Add markers to the map.
      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);
    }

// Center the map on the coordinates of any clicked circle from the 'circle' layer.
    map.on('click', 'circle', (e) => {
      console.log('output-> e::: ', e)
      map.flyTo({
        center: e.features[0].geometry.coordinates
      });
    });

    // Create a popup,but don't add it to the map yet.
    const popup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false,
    })

// Change the cursor to a pointer when the it enters a feature in the 'circle' layer.
    map.on('mouseenter', 'circle', (e) => {
      console.log('output-> mouseenter')
      map.getCanvas().style.cursor = 'pointer';

      // Copy coordinates array.
      const coordinates = e.features[0].geometry.coordinates.slice();
      const description = e.features[0].properties.description;

      // Ensure that it the map is zoomed out such that multiple
      // copies of the feature are visible, the popup appears
      // over the copy being pointed to.
      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
      }

      // Populate the popup and set its coordinates
      // based on the feature found.
      popup.setLngLat(coordinates).setHTML(description).addTo(map);
    });

// Change it back to a pointer when it leaves.
    map.on('mouseleave', 'circle', () => {
      console.log('output-> mouseleave')
      map.getCanvas().style.cursor = '';
      popup.remove();
    });
  });
})
</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100%;
}
</style>
